<template>
  <div @mouseover="showset" @mouseout="hideset" :style="{color:moddata.config.fontcolor}" class="mod">
    <div>
      <div class="con">
        <div class="title" v-show="moddata.config.titleshow">
          <span>
            <i class="iconfont icon-barrage_fill"></i>&nbsp;{{moddata.config.title}}</span>
        </div>
        <div class="text">
          <div class="logo">
            <div class="imgbox">
              <img :src="data.LogoSrc?data.LogoSrc:'/Areas/Template/Content/Design/images/timg.jpg'" alt="">
            </div>
          </div>
          <div class="name" v-cloak>{{data.Name}}</div>
          <div class="desc" v-cloak>{{data.DescInfo}}</div>
          <div class="focus" v-show="!isFoucus" @click="FocusSponsor">+关注</div>
          <div class="alfocus" v-show="isFoucus" @click="RemoveFocusSponsor">已关注</div>
        </div>
      </div>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">
        <i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod">
        <i class="el-icon-delete"></i> 删除</div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
  } from 'vuex'
  import {
    MessageBox,
    Message
  } from 'element-ui'
  export default {
    props: ["moddata", "index", "data"],
    data: function () {
      return {
        maskshow: false,
        isFoucus: false
      }
    },
    created() {
      var that = this;
      if (window.IfLog) {
        $.ajax("/Event/Sponsor/SponsorIsFocus", {
          type: "post",
          contentType: "application/json",
          headers: {
            ISGZIPDATA: "0"
          },
          data: JSON.stringify({
            sponsorId: that.parameters.sponsorId,
          }),
          success: function (data) {
            that.isFoucus = data.isFoucus;
          },
          error: function (err) {
            console.log(err)
          }
        });
      }

    },
    computed: {
      ...mapState([
        "parameters"
      ]),
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$store.commit({
          type: 'showsetbox',
          setMod: 'setShowMod',
          index: this.index
        })
      },
      deletemod: function () {
        this.$store.dispatch('deleteMod', this.index)
      },
      FocusSponsor() {
        var that = this;
        if (window.IfLog) {
          $.ajax("/Event/Sponsor/FocusSponsor", {
            type: "post",
            contentType: "application/json",
            headers: {
              ISGZIPDATA: "0"
            },
            data: JSON.stringify({
              sponsorid: that.parameters.sponsorId,
            }),
            success: function (data) {
              if (data.status) {
                that.isFoucus = true;
              }
              Message({
                type: 'success',
                message: data.msg
              });
            },
            error: function (err) {
              console.log(err)
            }
          });
        }else{
          var ewmUrl = window.location.protocol + "//" + window.location.host + "/Event/Sponsor/Sponsor?siteId=sponsor&sponsorId=" + this.parameters.sponsorId;
          window.location.href = "/hyx/login?ReturnUrl="+encodeURIComponent(ewmUrl);
        }
      },
      RemoveFocusSponsor() {
        var that = this;
        MessageBox.confirm('确定取消关注吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $.ajax("/Event/Sponsor/RemoveFocusSponsor", {
            type: "post",
            contentType: "application/json",
            headers: {
              ISGZIPDATA: "0"
            },
            data: JSON.stringify({
              sponsorid: that.parameters.sponsorId,
            }),
            success: function (data) {
              if (data.status) {
                that.isFoucus = false;
              }
              Message({
                type: 'success',
                message: data.msg
              });
            },
            error: function (err) {
              console.log(err)
            }
          });
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .mod {
    position: relative;
  }

  .con {
    border: 1px solid #eaeaea;
  }

  .text {
    background: #ffffff;
    padding: 8px;
    .logo {
      padding: 20px 0 10px;
      .imgbox {
        width: 105px;
        height: 105px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 105px;
          height: 105px;
        }
      }
    }
    .name {
      text-align: center;
      font-size: 18px;
      color: #434343;
      padding-bottom: 10px;
    }
    .desc {
      font-size: 14px;
      color: #616161;
      line-height: 22px;
      padding: 10px 35px;
    }
    .focus {
      margin: 15px auto;
      width: 200px;
      height: 40px;
      line-height: 40px;
      background: #fe813f;
      color: #fff;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
    }
    .alfocus {
      margin: 15px auto;
      width: 200px;
      height: 40px;
      line-height: 40px;
      background: rgb(204, 204, 204);
      color: #fff;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
    }
  }

  .title {
    padding: 0 20px;
    height: 40px;
    font-size: 16px;
    color: #434343;
    background: #f8f8f8;
    line-height: 40px;
    .iconfont {
      display: none;
    }
  }
</style>